
/* 首页 */
<template>
  <div class="index">
    <Layout>
      <Header>
        <index-header-v></index-header-v>
      </Header>
      <Content>
        <div class="floorWarp">
          <Row class="floor goInto" type="flex" justify="center">
            <!-- 新闻 -->
            <Col class="m-jj" :lg="{span:18}">
              <Card :bordered="false">
                <p class="title" slot="title">走进世贸</p>
                <p class="fontClor" slot="title">World Trade profile</p>
                <p>
                  在公司出现以前，个人独资企业是最典型的企业形式；与独资企业并存的是各种，合伙组织当时的
                  合伙组织中最典型的就是家族经营团体，在公司产生以前，合伙组织都没有取得法人的地位
                  但是却有，其他的一些法人团体出现。这种情况最早可以追溯至古罗马时期。在古罗马，国家地方
                  自治团体，寺院等宗教团体…
                </p>
                <p style="text-align:right">
                  <Button type="primary" ghost>了解详情</Button>
                </p>
              </Card>
            </Col>
            <Col class="m-news" :lg="{span:18}">
              <Card :bordered="false">
                <p slot="title" style="text-align:center" class="title">世贸动态</p>
                <p slot="title" style="text-align:center" class="fontClor">World trade trends</p>
                <Row>
                  <Col class="dtTitle">
                    <Button :class="{active:show==1}" @click="activeShow(1)">公司新闻</Button>
                    <Button :class="{active:show==2}" @click="activeShow(2)">公司公告</Button>
                    <Button :class="{active:show==3}" @click="activeShow(3)">活动预告</Button>
                  </Col>
                  <Col span="24">
                    <Card :bordered="false" dis-hover>
                      <div v-if="show==1" class="swiper-container swiper-container-news">1
                        <div class="swiper-wrapper">
                          <div class="swiper-slide">
                            <Row :gutter="8">
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_03.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_05.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_07.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                            </Row>
                          </div>
                          <div class="swiper-slide">
                            <Row :gutter="8">
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_03.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_05.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_07.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                            </Row>
                          </div>
                        </div>
                        <div class="swiper-pagination"></div>
                      </div>
                      <div v-if="show==2" class="swiper-container swiper-container-news">2
                        <div class="swiper-wrapper">
                          <div class="swiper-slide">
                            <Row :gutter="8">
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_03.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_05.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_07.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                            </Row>
                          </div>
                          <div class="swiper-slide">
                            <Row :gutter="8">
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_03.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_05.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_07.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                            </Row>
                          </div>
                        </div>
                        <div class="swiper-pagination"></div>
                      </div>
                      <div v-if="show==3" class="swiper-container swiper-container-news">3
                        <div class="swiper-wrapper">
                          <div class="swiper-slide">
                            <Row :gutter="8">
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_03.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_05.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_07.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                            </Row>
                          </div>
                          <div class="swiper-slide">
                            <Row :gutter="8">
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_03.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_05.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                              <Col :lg="{span:8}">
                                <Card :bordered="false">
                                  <div style="text-align:center">
                                    <img
                                      src="../assets/images/index/newsTitle_07.jpg"
                                      alt=""
                                      srcset=""
                                    >
                                    <p>地球上的水是哪里来的？有人说是木星…</p>
                                    <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                                  </div>
                                </Card>
                              </Col>
                            </Row>
                          </div>
                        </div>
                        <div class="swiper-pagination"></div>
                      </div>
                    </Card>
                  </Col>
                </Row>
              </Card>
            </Col>
          </Row>
          <Row class="floor m-server" type="flex" justify="center">
            <!-- 世贸服务 -->
            <Col :lg="{span:18}">
              <div class="fl">
                <p class="title">世贸服务</p>
                <h3 class="fontClor">World trade trends</h3>
              </div>
              <Card :bordered="false" :padding="0" class="fr" dis-hover>
                <ul>
                  <li>
                    <div class="m_img">
                      <img src="../assets/images/index/zxlist_03.jpg" alt="">
                    </div>
                    <div class="m_title">文化娱乐</div>
                  </li>
                  <li>
                    <div class="m_img">
                      <img src="../assets/images/index/zxlist_05.jpg" alt="">
                    </div>
                    <div class="m_title">咨询中心</div>
                  </li>
                  <li>
                    <div class="m_img">
                      <img src="../assets/images/index/zxlist_10.jpg" alt="">
                    </div>
                    <div class="m_title">服务中心</div>
                  </li>
                  <li>
                    <div class="m_img">
                      <img src="../assets/images/index/zxlist_12.jpg" alt="">
                    </div>
                    <div class="m_title">会员中心</div>
                  </li>
                </ul>
              </Card>
            </Col>
            <div class="clear"></div>
          </Row>
          <Row class="floor m-attractInvestment" type="flex" justify="center">
            <!-- 招商 -->
            <Col :lg="{span:18}">
              <Card :bordered="false">
                <p slot="title" class="title">招商引资</p>
                <p slot="title" class="fontClor">Attract investment</p>
                <div class="swiper-container swiper-investment">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <Row :gutter="16">
                        <Col :lg="{span:6}" class="investment">
                          <Card :bordered="false">
                            <div style="text-align:center">
                              <img src="../assets/images/index/newsTitle_03.jpg" alt="" srcset="">
                              <p>地球上的水是哪里来的？有人说是木星…</p>
                              <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                              <p class="fontClor" style="text-align:right">了解详情</p>
                            </div>
                          </Card>
                        </Col>
                        <Col :lg="{span:6}" class="investment">
                          <Card :bordered="false">
                            <div style="text-align:center">
                              <img src="../assets/images/index/newsTitle_03.jpg" alt="" srcset="">
                              <p>地球上的水是哪里来的？有人说是木星…</p>
                              <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                              <p class="fontClor" style="text-align:right">了解详情</p>
                            </div>
                          </Card>
                        </Col>
                        <Col :lg="{span:6}" class="investment">
                          <Card :bordered="false">
                            <div style="text-align:center">
                              <img src="../assets/images/index/newsTitle_03.jpg" alt="" srcset="">
                              <p>地球上的水是哪里来的？有人说是木星…</p>
                              <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                              <p class="fontClor" style="text-align:right">了解详情</p>
                            </div>
                          </Card>
                        </Col>
                        <Col :lg="{span:6}" class="investment">
                          <Card :bordered="false">
                            <div style="text-align:center">
                              <img src="../assets/images/index/newsTitle_03.jpg" alt="" srcset="">
                              <p>地球上的水是哪里来的？有人说是木星…</p>
                              <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                              <p class="fontClor" style="text-align:right">了解详情</p>
                            </div>
                          </Card>
                        </Col>
                      </Row>
                    </div>
                    <div class="swiper-slide">
                      <Row :gutter="16">
                        <Col :lg="{span:6}" class="investment">
                          <Card :bordered="false">
                            <div style="text-align:center">
                              <img src="../assets/images/index/newsTitle_03.jpg" alt="" srcset="">
                              <p>地球上的水是哪里来的？有人说是木星…</p>
                              <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                              <p class="fontClor" style="text-align:right">了解详情</p>
                            </div>
                          </Card>
                        </Col>
                        <Col :lg="{span:6}" class="investment">
                          <Card :bordered="false">
                            <div style="text-align:center">
                              <img src="../assets/images/index/newsTitle_03.jpg" alt="" srcset="">
                              <p>地球上的水是哪里来的？有人说是木星…</p>
                              <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                              <p class="fontClor" style="text-align:right">了解详情</p>
                            </div>
                          </Card>
                        </Col>
                        <Col :lg="{span:6}" class="investment">
                          <Card :bordered="false">
                            <div style="text-align:center">
                              <img src="../assets/images/index/newsTitle_03.jpg" alt="" srcset="">
                              <p>地球上的水是哪里来的？有人说是木星…</p>
                              <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                              <p class="fontClor" style="text-align:right">了解详情</p>
                            </div>
                          </Card>
                        </Col>
                        <Col :lg="{span:6}" class="investment">
                          <Card :bordered="false">
                            <div style="text-align:center">
                              <img src="../assets/images/index/newsTitle_03.jpg" alt="" srcset="">
                              <p>地球上的水是哪里来的？有人说是木星…</p>
                              <p>据Smithsonian报道，说到太阳系早期，木星对地球可谓 是呵护备至。在某种程度上，这颗气态巨行星就像是地球的 保护者…</p>
                              <p class="fontClor" style="text-align:right">了解详情</p>
                            </div>
                          </Card>
                        </Col>
                      </Row>
                    </div>
                  </div>
                  <div class="swiper-pagination"></div>
                </div>
              </Card>
            </Col>
          </Row>
        </div>
      </Content>
      <Footer>
        <index-footer-v></index-footer-v>
      </Footer>
    </Layout>
  </div>
</template>

<script>
import IndexHeaderV from "../components/IndexHeader";
import IndexFooterV from "../components/IndexFooter";
import velocity from "../assets/js/velocity";
import Swiper from "../assets/js/swiper.min";
export default {
  components: {
    IndexHeaderV,
    IndexFooterV
  },
  data() {
    return {
      active: "active",
      show: 1
    };
  },
  mounted() {
    let mySwiperNews = new Swiper(".swiper-container-news", {
      autoplay: true, //可选选项，自动滑动
      pagination: {
        el: ".swiper-pagination"
      }
    });
    let mySwiperinvestment = new Swiper(".swiper-investment", {
      autoplay: true, //可选选项，自动滑动
      pagination: {
        el: ".swiper-pagination"
      }
    });
  },
  methods: {
    activeShow(type) {
      this.show = type;
    }
  }
};
</script>

<style lang="less">
@import "../assets/css/layout.less";
.active {
  color: #fff !important;
  background: #6895c0 !important;
}
.clear {
  clear: both;
}
.fr {
  float: right;
}
.fl {
  float: left;
}
.index {
  .floorWarp {
    background: #fff;
    .swiper-pagination-bullet {
      width: 60px;
      height: 10px;
      background-color: black;
      border-radius: 0;
      border: 1px solid #fff;
    }
    .swiper-pagination-bullet-active {
      background-color: #72a0cc;
    }
    .goInto {
      padding: 80px 0;
    }
    .m-jj {
      height: 500px;
      background-color: #e5e5e5;
      background-image: url("../assets/images/index/jjBg.jpg");
      background-size: 50% 100%;
      background-repeat: no-repeat;

      .ivu-card {
        width: 55%;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -110px;
        padding-left: 5%;
      }
    }
    .m-news {
      .dtTitle {
        margin: 0 auto;
        width: 400px;
        display: flex;
        justify-content: space-between;
      }
      .swiper-wrapper {
        padding-bottom: 50px;
        .ivu-card {
          img {
            width: 100%;
          }
          p {
            text-align: left;
          }
        }
      }
    }
    .m-server {
      background-color: #e5e5e5;
      background-image: url("../assets/images/index/whbg.jpg");
      background-size: 50% 100%;
      background-repeat: no-repeat;
      padding: 80px 0;
      .ivu-card {
        background: none;
        width: 55%;
        ul {
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-flow: wrap;
          li {
            width: 45%;
            position: relative;
            background: blue;
            margin: 10px;
            cursor: pointer;
            img {
              width: 100%;
            }
            .m_title {
              position: absolute;
              left: 0;
              top: 50%;
              text-align: center;
              width: 100%;
              height: 80px;
              color: #ffffff;
              font-size: 1.5em;
              background-image: linear-gradient(
                to left,
                rgba(0, 0, 0, 0.3) 15%,
                rgba(0, 0, 0, 0.9) 70%,
                rgba(0, 0, 0, 0.3) 100%
              );
              line-height: 80px;
              margin-top: -40px;
            }
            .m_img img {
              transition: all 1s;
              width: 100%;
              height: 100%;
              transform: scale(1);
            }
          }
          li:hover .m_img img {
            opacity: 0.8;
            transform: scale(1.02);
          }
          li:hover .m_title {
            background: none;
          }
        }
      }
    }
    .m-attractInvestment {
      padding: 80px 0;
      .swiper-wrapper {
        padding-bottom: 50px;
        .ivu-card {
          img {
            width: 100%;
          }
          p {
            text-align: left;
          }
        }
      }
    }
    .swiper-investment {
      .investment {
        transform: scale(1);
      }
      .investment:hover {
        transform: scale(1.1);
      }
    }
  }
}
</style>